const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉注释
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启压缩
const { HashedModuleIdsPlugin } = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}

//
const isProduction = process.env.NODE_ENV === 'production'
//
// cdn预加载使用
const externals = {
  // 'vue': 'Vue',
  // 'axios': 'axios',
  // 'WangEditor': 'wangEditor',
  // 'qs':'qs'
  // 'mathjs': 'math',
  // 'element-plus': 'ElementPlus',
}
// Vue
//
//     <script src="https://unpkg.com/vue@3.0"></script>
//     <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
const cdn = {
  // 开发环境
  dev: {
    css: [''],
    js: [],
  },
  // 生产环境
  build: {
    css: [
      // 'https://unpkg.com/element-plus@1.0.2-beta.41/lib/theme-chalk/index.css'
    ],
    js: [
      // 'https://unpkg.com/vue@3.0.11/dist/vue.global.js',
      // 'https://cdn.bootcss.com/axios/0.21.1/axios.min.js',
      // 'https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js',
      // 'https://cdn.bootcdn.net/ajax/libs/mathjs/9.3.2/math.min.js',
      // "https://unpkg.com/element-plus@1.0.2-beta.41/lib/index.full.js"
    ],
  },
}

module.exports = {
  lintOnSave: false, // 关闭eslint
  productionSourceMap: false,
  publicPath: process.env.NODE_ENV === 'development' ? '' : '././',
  // outputDir: process.env.outputDir, // 生成文件的目录名称

  chainWebpack: (config) => {
    config.resolve.alias.set('@', resolve('src'))

    // 压缩图片
    // config.module
    //   .rule('images')
    //   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    //   .use('image-webpack-loader')
    //   .loader('image-webpack-loader')
    //   .options({ bypassOnDebug: true })

    //   // webpack 会默认给commonChunk打进chunk-vendors，所以需要对webpack的配置进行delete
    //   config.optimization.delete('splitChunks')
    //
    config.plugin('html').tap((args) => {
      args[0].title = '智能充电平台'
      if (process.env.NODE_ENV === 'production') {
        args[0].cdn = cdn.build
      }
      // if (process.env.NODE_ENV === 'fdd') {
      //   args[0].cdn = cdn.build
      // }
      if (process.env.NODE_ENV === 'development') {
        args[0].cdn = cdn.dev
      }
      // args[0].cdn = cdn.dev
      return args
    })
    // if(isProduction){
    //   config.externals = externals;
    // }

    //
    //   config
    //     .plugin('webpack-bundle-analyzer')
    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
  //
  configureWebpack: (config) => {
    const plugins = []
    //
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'], //移除console
            },
          },
        })
      )
      // 服务器也要相应开启gzip
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]', //压缩后的文件策略
          algorithm: 'gzip', //压缩方式
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, //可设置需要压缩的文件类型
          //     include:'', //符合任何这些条件的文件
          //     exclude:'',//排除压缩的文件
          threshold: 10240, //大于10240字节的文件启用压缩
          minRatio: 0.8, // 压缩比率大于等于0.8时不进行压缩
          deleteOriginalAssets: false, //是否删除压缩前的文件，默认false
        })
      )

      //     // 用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境
      plugins.push(new HashedModuleIdsPlugin())
      //
      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 1000 * 60,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1]
                return `npm.${packageName.replace('@', '')}`
              },
            },
          },
        },
      }

      // 取消webpack警告的性能提示
      config.performance = {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 1000 * 500,
        //生成文件的最大体积
        maxAssetSize: 1000 * 1000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
          return assetFilename.endsWith('.js')
        },
      }

      // 打包时npm包转CDN
      config.externals = externals
    }

    return { plugins }
  },
  //
  // pluginOptions: {
  //   // 配置全局less
  //   'style-resources-loader': {
  //     preProcessor: 'less',
  //     patterns: [resolve('./src/style/theme.less')]
  //   }
  // },
  // devServer: {
  //
  // }
}
